<template>
	<view :style="$theme.pageStyle">
		<view class='bill-details'>
			<view class='nav acea-row'>
				<view class='item' :class='type==0 ? "on":""' @click='changeType(0)'>全部</view>
				<view class='item' :class='type==1 ? "on":""' @click='changeType(1)'>消费</view>
				<view class='item' :class='type==2 ? "on":""' @click='changeType(2)'>充值</view>
			</view>
			<view class='sign-record'>
				<view class='list'>
					<view class='item'>
						<view class='listn' style="margin-top: 15px;">
							<view class='itemn acea-row row-between-wrapper' v-for="(item,index) in DataList" :key="index">
								<view>
									<view class='name line1'>{{item.remark}}</view>
									<view>{{item.create_time}}</view>
								</view>
								<view class='num' v-if="item.action == 1">+{{item.change_amount}}</view>
								<view class='num' style="color: #fa3534;"  v-else>-{{item.change_amount}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="DataList.length == 0">
					<u-empty
					        mode="data"
							style="margin-top: 50px;"
					>
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
		},
		data() {
			return {
				name: '',
				keyword: '',
				DataList: [],
				current: 0,
				hasMore: false,
				loading: true,
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				start: 0,
				stop: 0,
				total: 0,
				type: 0,
			};
		},
		onLoad(opt) {
			this.type = opt.type || 0;
			this.timeer()
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			changeType: function(type) {
				this.type = type;
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				console.log(this.type)
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/balancelog', {
						'page': page,
						'limit': this.limit,
						'type': this.type,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.total = res.data.total
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			submitForm() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},

		},
	}
</script>

<style scoped lang='scss'>
	.acea-row {
	    display: flex;
	    flex-wrap: wrap;
	}
	.sign-record .list .item .data{
		color: #999;
	}
	.sign-record .list .item .listn{
		width: 710rpx;
		margin: 0 auto;
		border-radius: 24rpx;
	}
	.sign-record .list .item .listn .itemn{
		padding: 0;
		margin: 0 30rpx;
		height: 78px;
		
	}
	.sign-record .list .item .listn .itemn:nth-last-child(1){
		border-bottom: 0;
	}
	.sign-record .list .item .listn .itemn .name{
		color: #333;
	}
	.sign-record .list .item .listn .itemn .num{
		color: #333333;
		font-family: "SemiBold";
	}
	.bill-details .nav {
		background-color: #fff;
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
	}

	.bill-details .nav .item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}

	.bill-details .nav .item.on {
		color: var(--color-primary);
		/* border-bottom: 3rpx solid var(--color-primary); */
		font-size: 30rpx;
		position: relative;
	}
	.bill-details .nav .item.on::after{
		position: absolute;
		width: 64rpx;
		height: 6rpx;
		border-radius: 20px;
		content: ' ';
		background: var(--color-primary);
		bottom: 0;
		left:50%;
		margin-left: -32rpx;
	}
	
	.sign-record .list .item .listn {
	    background-color: #fff;
	    font-size: 12px;
	    color: #999;
	}
	
	.acea-row.row-between-wrapper {
	    align-items: center;
	    justify-content: space-between;
	}
	.acea-row {
	    display: flex;
	    flex-wrap: wrap;
	}
	
	.sign-record .list .item .data {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #666;
	}
	
	.sign-record .list .item .listn {
		background-color: #fff;
		font-size: 24rpx;
		color: #999;
	}
	
	.sign-record .list .item .listn .itemn {
		border-bottom: 1rpx solid #eee;
		padding-right: 30rpx;
		padding-left: 30rpx;
	}
	
	.sign-record .list .item .listn .itemn .name {
		width: 390rpx;
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 10rpx;
	}
	
	.sign-record .list .item .listn .itemn .num {
		font-size: 36rpx;
		color: #16ac57;
	}
	
	.sign-record .list .item .listn .itemn .num.font-color {
		color: #e93323 !important;
	}
	
</style>
